import { Image, View } from '@tarojs/components';
import './index.scss'
import { CdnImage } from ".."
import { Gender } from '../../types/User';
import ManIcon from './images/man.png'
import WomanIcon from './images/woman.png'

interface AvatarProps {
  avatar: string
  gender?: Gender
}

const Avatar = ({avatar, gender}: AvatarProps) => {
  return (
    <View className='position-relative avatar'>
      <CdnImage
        src={avatar}
        mode='aspectFill'
        className='match-parent avatar-image'
      />
      { gender && <Image className='avatar-gender' src={gender === Gender.man ? ManIcon : WomanIcon} mode='scaleToFill' /> }
    </View>
  )
}

export default Avatar